<script setup lang="ts">
import {addTree} from "@/api/home/login/login";
import {reactive, ref} from "vue";
import Vue from 'vue';
import {showToast} from "vant";
import router from "@/router";
// import { Toast } from '@femessage/vant';

let title = ref<string>('')
let content = ref<string>('')

function publishTree() {
    if (title.value != '' && content.value != '') {
        if (title.value.length <= 20) {
            addTree({
                title: title.value,
                content: content.value
            }).then((item) => {
                if (item.code == 200) {
                    console.log(item)
                    router.back()
                    showToast({
                        message:'发布成功',
                        background:'#F0F9EB',
                        color:'#AEC63A',
                        position:'top',
                    });
                } else {
                    showToast({
                        message:'发布失败请重试',
                        background:'#FEF0F0',
                        color:'#F56C6C',
                        position:'top',
                    });
                }
            })
        } else {
            showToast({
                message:'标题长度不能超过20字',
                background:'#FEF0F0',
                color:'#F56C6C',
                position:'top',
            });
        }
    } else {
        showToast({
            message:'标题或内容不能为空',
            background:'#FEF0F0',
            color:'#F56C6C',
            position:'top',
        });
    }
}

</script>

<template>
    <div style="width: 100vw">
        <div class="top">
            <router-link to="/tree">
                <van-icon name="arrow-left"/>
            </router-link>
            <span>发布信息</span>
        </div>
        <input class="title" placeholder="请输入标题" v-model.trim="title"/>
        <textarea class="content" placeholder="请输入正文" v-model="content"></textarea>
        <van-button round type="info" class="PublishBtn" @click="publishTree">发&nbsp;&nbsp;布</van-button>
    </div>
</template>

<style scoped>
.top {
    margin: 0;
    padding: 20px;
    background-color: #F8F8F8;
    font-size: 18px;
}

.title {
    margin-left: 5%;
    padding: 10px;
    width: 90%;
    height: 50px;
    border: 0;
    border-bottom: 1px solid #CCCCCC;
    font-size: 20px;
}

.content {
    margin-left: 5%;
    padding: 10px;
    width: 90%;
    min-height: 700px;
    border: 0;
}

.PublishBtn {
    margin-left: 5vw;
    width: 90%;
    border: 0;
    background-color: #1989FA;
    color: white;
    font-size: 18px;
}
</style>